<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Model Ownership: DOM Model</h1>

<h2>Goal</h2>

<p>Create a mechanism by which the DOM and script can share access to the model data which drives the DOM's display.</p>

<code><pre>&lt;div id="person"&gt;
  &lt;div modelScope="basicInfo"&gt; &lt;!-- .model at this div will be { name: 'Sam' } --&gt;
  &lt;/div&gt;
  &lt;div modelScope="address"&gt; &lt;!-- .model at this div will be { street: '1234 Happy' } --&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
document.getElementById('person').model = Model.get({
  basicInfo: { name: 'Sam' },
  address: { street: '1234 Happy' }
});
&lt;/script&gt;</pre></code>

<h2 id="modelProperty">HTMLElement.model, TextNode.model</h2>

<p>HTMLElement and TextNode implement a read/write property called <code>model</code>. It is the location in which the data which drives the display of a fragment of DOM resides.</p>

<ul>
<li>The value of a node's <code>model</code> is either its assigned value, or its <code>parentElement</code>'s value.</li>

<li>All nodes default to inheriting their <code>model</code> value from their parent.</li>

<li>Valid assignment values are scalars, objects and <code>null</code>.</li>

<li>Assigning <code>undefined</code> has the special meaning that the node is  to inherit its <code>model</code> value from its parent</li>

<li>As a consequence of the above, a node's <code>model</code> value is not read/write consistent. Reading its value immediately after setting may not return the same value.</li>
</ul>

<h2>HTMLElement.modelScope, TextNode.modelScope</h2>

<p>HTMLElement and TextNode implement a read/write "modelscope" attribute and a <code>modelScope</code> property which delegates to the value held in the attribute. This creates a scoping mechanism so that sub-fragments of the DOM may use shorter paths to reference model values.</p>

<ul>
<li>Valid assignment values are strings, <code>null</code>, and <code>undefined</code>. Strings must either be empty, or represent a simple <a href="model.html#path">path</a>. <code>null</code>, <code>undefined</code>, and emptry string are all interpreted as an empty path.</li>

<li>If <code>modelScope</code> is a non-empty path, it affects the <code>model</code> value of the node to which it is attached in that becomes the <a href="model.html#pathValue">path value</a> at the specified path from its assigned or inherited value.</p>
</ul>

<p><em>Note:</em> There is an <a href="template.html#instancePath">internal (non-public API) scoping mechanism</a>, similar to <code>modelScope</code> which can affect a node's <code>model</code> value and is required for <a href="template.html#iterate">template iteration</a>.</p>

<h2><a name=model-owner>Model Owner</a></h2>

<p>A model owner is the nearest ancestor node that has a model assigned to it.</p>

<h2>Open Issues</h2>

<ul>
<li>Design/spec a declarative mechanism for assigning model data to the DOM. E.g. a <code>dataSrc</code> attribute on &lt;template&gt; and/or a new &lt;datasource&gt; element.</li>
</ul>

</body>
</html>
